import 'dart:math';
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../../../../common/app_colors.dart';
import '../../../../common/app_text_style.dart';
import '../../../../widget/text/text_widget.dart';
import 'scatter_chart1_logic.dart';

class ScatterChart1Page extends StatefulWidget {
  ScatterChart1Page({Key? key}) : super(key: key);

  final blue1 = AppColors.colorFF2196F3.withOpacity(0.5);
  final blue2 = AppColors.colorFF2196F3;

  @override
  State<ScatterChart1Page> createState() => ScatterChart1PageState();
}

class ScatterChart1PageState extends State<ScatterChart1Page> {
  final logic = Get.put(ScatterChart1Logic());
  final state = Get.find<ScatterChart1Logic>().state;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(
        left: 32,
        right: 32,
        top: 32,
        bottom: 32,
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          TextWidget(
            "Scatter Chart Sample1",
            TS_FF50E4FF_18_W4,
          ),
          const SizedBox(height: 20),
          Container(
            decoration: const BoxDecoration(
              color: AppColors.colorFF1B2339,
              borderRadius: BorderRadius.all(Radius.circular(8)),
            ),
            child: GetBuilder<ScatterChart1Logic>(builder: (logic){
              return GestureDetector(
                onTap: () {
                  logic.showFlutter();
                },
                child: AspectRatio(
                  aspectRatio: 1,
                  child: ScatterChart(
                    ScatterChartData(
                      scatterSpots: state.showFlutter ? flutterLogoData() : randomData(),
                      minX: 0,
                      maxX: state.maxX,
                      minY: 0,
                      maxY: state.maxY,
                      borderData: FlBorderData(
                        show: false,
                      ),
                      gridData: const FlGridData(
                        show: false,
                      ),
                      titlesData: const FlTitlesData(
                        show: false,
                      ),
                      scatterTouchData: ScatterTouchData(
                        enabled: false,
                      ),
                    ),
                    swapAnimationDuration: const Duration(milliseconds: 600),
                    swapAnimationCurve: Curves.fastOutSlowIn,
                  ),
                ),
              );
            }) ,
          )
        ],
      ),
    );
  }

  /// logo数据
  List<ScatterSpot> flutterLogoData() {
    return [
      /// section 1
      ScatterSpot(20, 14.5, color: widget.blue1, radius: state.radius),
      ScatterSpot(22, 16.5, color: widget.blue1, radius: state.radius),
      ScatterSpot(24, 18.5, color: widget.blue1, radius: state.radius),

      ScatterSpot(22, 12.5, color: widget.blue1, radius: state.radius),
      ScatterSpot(24, 14.5, color: widget.blue1, radius: state.radius),
      ScatterSpot(26, 16.5, color: widget.blue1, radius: state.radius),

      ScatterSpot(24, 10.5, color: widget.blue1, radius: state.radius),
      ScatterSpot(26, 12.5, color: widget.blue1, radius: state.radius),
      ScatterSpot(28, 14.5, color: widget.blue1, radius: state.radius),

      ScatterSpot(26, 8.5, color: widget.blue1, radius: state.radius),
      ScatterSpot(28, 10.5, color: widget.blue1, radius: state.radius),
      ScatterSpot(30, 12.5, color: widget.blue1, radius: state.radius),

      ScatterSpot(28, 6.5, color: widget.blue1, radius: state.radius),
      ScatterSpot(30, 8.5, color: widget.blue1, radius: state.radius),
      ScatterSpot(32, 10.5, color: widget.blue1, radius: state.radius),

      ScatterSpot(30, 4.5, color: widget.blue1, radius: state.radius),
      ScatterSpot(32, 6.5, color: widget.blue1, radius: state.radius),
      ScatterSpot(34, 8.5, color: widget.blue1, radius: state.radius),

      ScatterSpot(34, 4.5, color: widget.blue1, radius: state.radius),
      ScatterSpot(36, 6.5, color: widget.blue1, radius: state.radius),

      ScatterSpot(38, 4.5, color: widget.blue1, radius: state.radius),

      /// section 2
      ScatterSpot(20, 14.5, color: widget.blue2, radius: state.radius),
      ScatterSpot(22, 12.5, color: widget.blue2, radius: state.radius),
      ScatterSpot(24, 10.5, color: widget.blue2, radius: state.radius),

      ScatterSpot(22, 16.5, color: widget.blue2, radius: state.radius),
      ScatterSpot(24, 14.5, color: widget.blue2, radius: state.radius),
      ScatterSpot(26, 12.5, color: widget.blue2, radius: state.radius),

      ScatterSpot(24, 18.5, color: widget.blue2, radius: state.radius),
      ScatterSpot(26, 16.5, color: widget.blue2, radius: state.radius),
      ScatterSpot(28, 14.5, color: widget.blue2, radius: state.radius),

      ScatterSpot(26, 20.5, color: widget.blue2, radius: state.radius),
      ScatterSpot(28, 18.5, color: widget.blue2, radius: state.radius),
      ScatterSpot(30, 16.5, color: widget.blue2, radius: state.radius),

      ScatterSpot(28, 22.5, color: widget.blue2, radius: state.radius),
      ScatterSpot(30, 20.5, color: widget.blue2, radius: state.radius),
      ScatterSpot(32, 18.5, color: widget.blue2, radius: state.radius),

      ScatterSpot(30, 24.5, color: widget.blue2, radius: state.radius),
      ScatterSpot(32, 22.5, color: widget.blue2, radius: state.radius),
      ScatterSpot(34, 20.5, color: widget.blue2, radius: state.radius),

      ScatterSpot(34, 24.5, color: widget.blue2, radius: state.radius),
      ScatterSpot(36, 22.5, color: widget.blue2, radius: state.radius),

      ScatterSpot(38, 24.5, color: widget.blue2, radius: state.radius),

      /// section 3
      ScatterSpot(10, 25, color: widget.blue2, radius: state.radius),
      ScatterSpot(12, 23, color: widget.blue2, radius: state.radius),
      ScatterSpot(14, 21, color: widget.blue2, radius: state.radius),

      ScatterSpot(12, 27, color: widget.blue2, radius: state.radius),
      ScatterSpot(14, 25, color: widget.blue2, radius: state.radius),
      ScatterSpot(16, 23, color: widget.blue2, radius: state.radius),

      ScatterSpot(14, 29, color: widget.blue2, radius: state.radius),
      ScatterSpot(16, 27, color: widget.blue2, radius: state.radius),
      ScatterSpot(18, 25, color: widget.blue2, radius: state.radius),

      ScatterSpot(16, 31, color: widget.blue2, radius: state.radius),
      ScatterSpot(18, 29, color: widget.blue2, radius: state.radius),
      ScatterSpot(20, 27, color: widget.blue2, radius: state.radius),

      ScatterSpot(18, 33, color: widget.blue2, radius: state.radius),
      ScatterSpot(20, 31, color: widget.blue2, radius: state.radius),
      ScatterSpot(22, 29, color: widget.blue2, radius: state.radius),

      ScatterSpot(20, 35, color: widget.blue2, radius: state.radius),
      ScatterSpot(22, 33, color: widget.blue2, radius: state.radius),
      ScatterSpot(24, 31, color: widget.blue2, radius: state.radius),

      ScatterSpot(22, 37, color: widget.blue2, radius: state.radius),
      ScatterSpot(24, 35, color: widget.blue2, radius: state.radius),
      ScatterSpot(26, 33, color: widget.blue2, radius: state.radius),

      ScatterSpot(24, 39, color: widget.blue2, radius: state.radius),
      ScatterSpot(26, 37, color: widget.blue2, radius: state.radius),
      ScatterSpot(28, 35, color: widget.blue2, radius: state.radius),

      ScatterSpot(26, 41, color: widget.blue2, radius: state.radius),
      ScatterSpot(28, 39, color: widget.blue2, radius: state.radius),
      ScatterSpot(30, 37, color: widget.blue2, radius: state.radius),

      ScatterSpot(28, 43, color: widget.blue2, radius: state.radius),
      ScatterSpot(30, 41, color: widget.blue2, radius: state.radius),
      ScatterSpot(32, 39, color: widget.blue2, radius: state.radius),

      ScatterSpot(30, 45, color: widget.blue2, radius: state.radius),
      ScatterSpot(32, 43, color: widget.blue2, radius: state.radius),
      ScatterSpot(34, 41, color: widget.blue2, radius: state.radius),

      ScatterSpot(34, 45, color: widget.blue2, radius: state.radius),
      ScatterSpot(36, 43, color: widget.blue2, radius: state.radius),

      ScatterSpot(38, 45, color: widget.blue2, radius: state.radius),
    ];
  }

  /// 随机数据
  List<ScatterSpot> randomData() {
    const blue1Count = 21;
    const blue2Count = 57;
    return List.generate(blue1Count + blue2Count, (i) {
      Color color;
      if (i < blue1Count) {
        color = widget.blue1;
      } else {
        color = widget.blue2;
      }

      return ScatterSpot(
        (Random().nextDouble() * (state.maxX - 8)) + 4,
        (Random().nextDouble() * (state.maxY - 8)) + 4,
        color: color,
        radius: (Random().nextDouble() * 16) + 4,
      );
    });
  }
}
